<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>数据分析页面</title>
<meta name="renderer" content="webkit"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" />
<script type="text/javascript" src='<c:url value="/js/boot.js"></c:url>'></script>
<link rel="stylesheet" type="text/css"
	href='<c:url value="/share/styles.css"></c:url>' />
<style type="text/css">
.filterPan td {
	padding: 0;
}

.mini-splitter-pane {
	overflow: auto;
}

.mini-panel-body {
	padding: 0;
}

.pieTable {
	width: 806px;
	border-spacing: 10px;
}

.pieTable td {
	width: 50%;
	background-color: #f0f0f0;
	text-align: center;
}

.highcharts-title {
	font-size: 14px !important;
	font-weight: bold;
}

.highcharts-legend text {
	font-weight: normal !important;
}
</style>
</head>
<body>
	<table class="pieTable">
		<tr>
			<td colspan="3">
				<div class="mini-toolbar"
					style="padding: 0px; border-width: 0; border-bottom-width: 0px;">
					<table style="width: 100%;">
						<tr>
							<td style="vertical-align: bottom;"><span
								style="vertical-align: middle;">统计时间：</span> <input
								id="fiscalStarting" class="mini-combobox" style="width: 100px;"
								showNullItem="true" textField="periodText"
								valueField="periodValue" itemclick="selectMonth"
								allowInput="true" emptyText="起始期间..." nullItemText="&lt;无&gt;"
								value="${periodValue}"
								onvaluechanged="selectMonth" /> <span
								style="vertical-align: middle; margin: auto 5px; display: inline-block;">至</span>
								<input id="fiscalEnding" class="mini-combobox"
								style="width: 100px;" showNullItem="true" textField="periodText"
								valueField="periodValue" itemclick="selectMonth"
								allowInput="true" emptyText="截止期间..." nullItemText="&lt;无&gt;"
								value="${periodValue}"
								onvaluechanged="selectMonth" /> <a
								class="mini-button" id="seachOrgBtn" iconCls="icon-search"
								onclick="selectMonth()">统计</a></td>
						</tr>
					</table>
				</div>
				<div id="container1"
					style="width: 100%; height: 260px; padding: 0; margin-right: 0px;"></div>
			</td>
		</tr>
		<tr>
			<td>
				<div id="p2" class="mini-panel" showHeader="false" title="上月产值构成"
					borderStyle="border:0;"
					style="width: 300px; height: 290px; padding: 0; margin: 0 auto;"
					buttons="close collapse add edit remove ">
					<div id="container2"
						style="min-width: 260px; height: 280px; padding: 0; margin-right: 0px;"></div>
				</div>
			</td>
			<td>
				<div id="p3" class="mini-panel" showHeader="false" title="上月产值构成"
					borderStyle="border:0;"
					style="width: 300px; height: 290px; padding: 0; margin: 0 auto;"
					buttons="close collapse add edit remove ">
					<div id="container3"
						style="min-width: 260px; height: 280px; padding: 0; margin-right: 0px;"></div>
				</div>
			</td>
			<td>
				<div id="p4" class="mini-panel" showHeader="false" title="上月产值构成"
					borderStyle="border:0;"
					style="width: 300px; height: 290px; padding: 0; margin: 0 auto;"
					buttons="close collapse add edit remove ">
					<div id="container4"
						style="min-width: 260px; height: 280px; padding: 0; margin-right: 0px;"></div>
				</div>
			</td>
		</tr>
	</table>
	<script type="text/javascript">
		mini.parse();
		mini_debugger = false;

		var container1 = mini.get("container1");
		var container2 = mini.get("container2");
		var container3 = mini.get("container3");
		var splitpan = mini.get("splitterPan");
		var fiscalStarting = mini.get("fiscalStarting");
		var fiscalEnding = mini.get("fiscalEnding");

		var filterHelper = gridFilter();

		$(function() {
			loadPeriod();
			loadPie1();
			loadPie2();
			loadPie3();
		});
		function loadPeriod() {
			var url = "<c:url value='/analysis/month' />";
			$.ajax({
				url : url,
				type : "get",
				dataType : 'json',
				success : function(text) {
					fiscalStarting.setData(text);
					if(text.length > 12){
						fiscalStarting.select(12);
					}else{
						fiscalStarting.select(text.length-1);
					}
					fiscalEnding.setData(text);
					fiscalEnding.select(1);
				},
				complete : function(XMLHttpRequest, textStatus) {
					selectMonth();
				},
				error : function() {
					mini.alert("获取期间出错！");
				}
			});
		}
		function selectMonth(){
			var start = fiscalStarting.getValue();
			var end = fiscalEnding.getValue();
			if(!start || !end){
				return;
			}
			if(start > end){
				mini.alert("结束区间不能小于开始区间");
				return;
			}
			loadChart(start,end);
		}
		function loadChart(start,end){
			$.ajax({
				url : '<c:url value="/analysis/chartData"></c:url>',
				type : "post",
				dataType : 'json',
				data : {
					startPeriod : start,
					endPeriod : end
				},
				success : function(text) {
					//buildChart(text);
					buildBar(text);
				},
				complete : function(XMLHttpRequest, textStatus) {
				},
				error : function() {
					/* parent.mini.alert("获取图表数据出错."); */
				}
			});
		}
		function buildChart(text) {
			var container1 = '#container1';
			var subtitle = "";
			var titleName = "每月新增用户数";
			var data = {
					container : '#container1',
					dates : text.xAxisData,
					titleName : titleName,
					subtitle : subtitle,
					series : text.datas,
					yAxisTitle : '（人）',
					digitNum : 1
			};
			getColumn2(data);
		}
		
		
		//清除柱状图数据
		/* function clearChart() {
			var container1 = '#container1';
			var titleName = company + ' 今年产值汇报(单位:万)';
			getColumn(container1, null, titleName, null, null, null);
		} */
		function buildBar(data) {
			var target = formatData(data);
			$(function() {
				$('#container1').highcharts({
					chart : {
						type : 'column',
						//type : 'bar',
						backgroundColor : '#F0F0F0'
					},
					title : {
						text : '每月新增用户数'
					},
					subtitle : {
						text : ''
					},
					xAxis : {
						categories : target.xAxisData,
						title : {
							text : null
						}
					},
					yAxis : {
						min : 0,
						title : {
							text : '单位:（人）',
							align : 'high'
						},
						labels : {
							overflow : 'justify'
						}
					},
					tooltip : {
						valueSuffix : '（人）'
					},
					plotOptions : {
						bar : {
							dataLabels : {
								enabled : true
							},
							pointWidth : 14
						}
					},
					legend : {
						//layout : 'horizontal',
						layout : 'vertical',
						align : 'right',
						verticalAlign : 'top',
						x : -10,
						y : 5,
						floating : true,
						borderWidth : 1,
						backgroundColor : '#FFFFFF',
						shadow : true
					},
					credits : {
						enabled : false
					},
					series : target.datas
				});
			});
		}
		function formatData(data) {
			var processData = data.datas;
			var colors = [ '#bed2b6', '#da9558' ];
			for (var i = 0, iLength = processData.length; i < iLength; i++) {
				var subData = processData[i].data;
				for (var j = 0, jLength = subData.length; j < jLength; j++) {
					data.datas[i].data[j] = parseFloat(subData[j].toFixed(4));
				}
				data.datas[i].color = colors[i];
			}
			return data;
		}
		function loadPie1() {
			$.ajax({
				url : '<c:url value="/analysis/gridData1"></c:url>',
				type : "post",
				dataType : 'json',
				success : function(text) {
					buildPie1(text);
				},
				complete : function(XMLHttpRequest, textStatus) {
				},
				error : function(obj) {
					parent.mini.alert("获取用户比例数据出错.");
				}
			});
		}
		function buildPie1(text) {
			var datas = text;//多维数组
			var pieDatas = new Array();
			var total = 0;
			for (var i = 0; i < datas.length; i++) {
				var itemName = datas[i].ItemName;
				var value = datas[i].Number;
				if (typeof value == "number" && value > 0) {
					total += value;
					pieDatas.push(new Array(itemName, parseFloat(value)));
				}
			}
			var titleName = "";
			var colors = ['#ff00ff', '#3cb371'];
			var parameters = {
				container : '#container2',
				dataMap : pieDatas,
				titleName : "普通用户和律师比例 (总计："+total+"人)",
				colors : colors,
				yAxisTitle : '人',
				digitNum : 1,
				clickFunc : null
			};
			chartPie = getPie3(parameters);
		}
		function loadPie2() {
			$.ajax({
				url : '<c:url value="/analysis/gridData2"></c:url>',
				type : "post",
				dataType : 'json',
				success : function(text) {
					buildPie2(text);
				},
				complete : function(XMLHttpRequest, textStatus) {
				},
				error : function(obj) {
					parent.mini.alert("获取问题比例数据出错.");
				}
			});
		}
		function buildPie2(text) {
			var datas = text;//多维数组
			var pieDatas = new Array();
			var total = 0;
			for (var i = 0; i < datas.length; i++) {
				var itemName = datas[i].ItemName;
				var value = datas[i].Number;
				if (typeof value == "number" && value > 0) {
					total += value;
					pieDatas.push(new Array(itemName, parseFloat(value)));
				}
			}
			var titleName = "";
			var colors = ['#b8860b', '#30e0e0'];
			var parameters = {
				container : '#container3',
				dataMap : pieDatas,
				titleName : "问题回复比例 (总计："+total+"个)",
				colors : colors,
				yAxisTitle : '个',
				digitNum : 1,
				clickFunc : null
			};
			chartPie = getPie3(parameters);
		}
		function loadPie3() {
			$.ajax({
				url : '<c:url value="/analysis/gridData3"></c:url>',
				type : "post",
				dataType : 'json',
				success : function(text) {
					buildPie3(text);
				},
				complete : function(XMLHttpRequest, textStatus) {
				},
				error : function(obj) {
					parent.mini.alert("获取问题类型比例数据出错.");
				}
			});
		}
		function buildPie3(text) {
			var datas = text;//多维数组
			var pieDatas = new Array();
			var total = 0;
			for (var i = 0; i < datas.length; i++) {
				var itemName = datas[i].ItemName;
				var value = datas[i].Number;
				if (typeof value == "number" && value > 0) {
					total += value;
					pieDatas.push(new Array(itemName, parseFloat(value)));
				}
			}
			var titleName = "";
			var colors = null;
			var parameters = {
				container : '#container4',
				dataMap : pieDatas,
				titleName : "问题类型比例 (总计："+total+"个)",
				colors : colors,
				yAxisTitle : '个',
				digitNum : 1,
				clickFunc : null
			};
			chartPie = getPie3(parameters);
		}
	</script>
</body>
</html>